<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #app {
            width: 500px;
            margin: 20px auto;
            border: solid 2px red;
            padding: 5px
        }

        .myin {
            width: 100%;
            height: 30px;
            border: solid 1px rgb(220, 114, 114);
            margin-right: 10px;
            padding: 5px
        }

        .mylist {
            list-style: none;
        }

        .mylist>li {
            height: 40px;
            line-height: 40px;
            border-bottom: solid grey 1px;
        }

        .del {
            height: 25px;
            float: right;
            margin-top: 8px;
        }

        footer {
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
        }

        footer>button {
            height: 20px;
            float: right;
            margin-top: 5px;
        }

        footer>span>span {
            margin: 0 5px;
        }
    </style>
</head>

<body>

    <div id='app'>
        <!-- input -->
        <myin @add="add"></myin>
        <!-- 列表渲染 -->
        <mylist v-for="item in myList" :item="item" @del="Del"></mylist>
        <!-- 页脚 -->
        <footer>
            <input type="checkbox" v-model="isAll">
            <span>
                <span>已完成 {{count}}个</span>/
                <span>总计：{{myList.length}}个</span>
            </span>
            <button @click="clear">清除已完成</button>
        </footer>
    </div>
</body>
<!-- 输入框 -->
<template id="myin">
    <input type="text" class="myin" placeholder="请输入待办事件" @keyup.enter="add" v-model="title">
</template>


<!-- 列表 -->
<template id="mylist">
    <ul class="mylist">
        <li :style="{backgroundColor:bg}" :key="item.id" @mouseenter="delshow(true)"
            @mouseleave="delshow(false)">
            <input type="checkbox" v-model="item.isFlag">
            {{item.title}}
            <button v-show="isshow" class="del" @click="del(item.id)">删除</button>
        </li>
    </ul>
</template>

<script>
    //输入框
    const myin = {
        template: "#myin",
        data() {
            return {
                title: ''
            }
        },
        methods: {
            add() {
                this.$emit('add', this.title);
                this.title = ''
            }
        }
    }

    //列表
    const mylist = {
        template: '#mylist',
        data() {
            return {
                isshow: false,
                bg: '#fff'
            }
        },
        props:['item'],
        inject: ['myList'],
        methods: {
            del(val) {
                this.$emit('del', val)
            },
            delshow(val) {
                this.isshow = val
                this.bg = val ? '#ccc' : '#fff'
            },
        },
    }
    //总组件
    const app = {
        data() {
            return {
                myList: [
                    {
                        isFlag: false,
                        title: '吃饭',
                        id: '234gjh'
                    },
                    {
                        isFlag: true,
                        title: "学习",
                        id: 'kle12'
                    },
                    {
                        isFlag: false,
                        title: '睡觉',
                        id: 'wqd213'
                    }
                ]
            }
        },
        methods: {
            add(val) {
                this.myList.unshift({
                    isFlag: false,
                    title: val,
                    id: Math.random()
                })
            },
            Del(val) {
                this.myList = this.myList.filter(item => item.id != val)
            },
            clear() {
                this.myList = this.myList.filter(item => item.isFlag !== true)
            }
        },
        computed: {
            count() {
                return this.myList.reduce((num, item) => {
                    return num + (item.isFlag ? 1 : 0)
                }, 0)
            },
            isAll: {
                get() {
                    return this.count == this.myList.length ? true : false
                },
                set(val) {
                    this.myList.forEach(item => {
                        item.isFlag = val
                    });
                }
            }
        },
        provide() {
            return {
                myList: Vue.computed(() => this.myList),
            }
        },
        components: {
            mylist,
            myin,
        }
    }





    const vm = Vue.createApp(app).mount('#app')
</script>

</html>